<template>
    <div class="PersonalSettings">
        <header-setting v-show="headerSetting"/>
        <el-form ref="user" :model="user" label-width="80px" :rules="rules" v-show="!headerSetting">
            <el-form-item label-width="0">
                <el-image
                        style="width: 200px;margin: 10px auto;"
                        :src="user.userFace"
                        :preview-src-list="srcList"
                        v-loading="loading">
                </el-image>
                <!--                <el-upload class="upload-demo"-->
                <!--                           :action="'timeapi/'+loginServiceApi+'/admin/userface'"-->
                <!--                           :headers="header"-->
                <!--                           :show-file-list="false"-->
                <!--                           :on-success="onSuccess"-->
                <!--                           :before-upload="beforeAvatarUpload">-->
                <el-button size="small" style="margin: auto;display:block" round :disabled="loading"
                           @click="openHeaderSetting">更换头像
                </el-button>
                <!--                </el-upload>-->
            </el-form-item>
            <el-form-item label="昵称" prop="name">
                <el-input v-model="user.name"></el-input>
            </el-form-item>
            <el-form-item label="介绍">
                <el-input type="textarea" v-model="user.remark"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="user.sex" style="margin: 9px 0px;float: left;">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                    <el-radio label="保密"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期">
                <el-date-picker
                        v-model="user.birthday"
                        type="datetime"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="地区">
                <el-cascader
                        size="large"
                        :options="options"
                        v-model="user.address"
                        @change="handleChange">
                </el-cascader>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit()">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    import {regionData} from "element-china-area-data";
    import store from "../../store";
    import {Message} from "element-ui";
    import {getRequest} from "../../utils/api";
    import HeaderSetting from "./components/headerSetting/headerSetting";

    export default {
        name: "PersonalSettings",
        components: {HeaderSetting},
        data() {
            return {
                loading: false,
                header: {
                    Authorization: window.sessionStorage.getItem("tokenStr"),
                },
                srcList: [
                    JSON.parse(window.sessionStorage.getItem('user')).userFace
                ],
                options: regionData,
                selectedOptions: [],
                rules: {
                    name: [
                        {required: true, message: '昵称不可为空', trigger: 'blur'}
                    ],
                },
            }
        },
        computed: {
            ...mapState({
                loginServiceApi: state => state.loginServiceApi,
                fileUpload: state => state.fileUpload,
                user: state => state.user,
                headerSetting: state => state.headerSetting,
            })
        },
        methods: {
            // onSuccess(response, file, fileList) {
            //     if (response.code == 200) {
            //         this.loading = false
            //         let user = JSON.parse(window.sessionStorage.getItem('user'));
            //         user.userFace = response.data;
            //         this.user.userFace = response.data
            //         this.$store.commit('initUser', this.user)
            //         window.sessionStorage.setItem("user", JSON.stringify(user))
            //         Message.success({message: '上传成功！'})
            //     }
            // },
            handleChange(value) {
            },

            openHeaderSetting() {
                store.commit("initHeaderSetting", true)
            },
            onSubmit() {
                this.$refs.user.validate(data => {
                    if (data) {
                        this.putRequest(this.loginServiceApi+"/admin/info",this.user).then(res=>{
                            if (res.code == 200){
                                Message.success({message: '保存成功！'})
                                getRequest(store.state.loginServiceApi + '/login/info').then(res2 => {
                                    if (res2.code = 200) {
                                        // 存入用户信息
                                        window.sessionStorage.setItem("user", JSON.stringify(res2.data))
                                        store.commit('initUser', res2.data);
                                        return;
                                    }
                                })
                            }

                        })
                    }
                })
            },
            // beforeAvatarUpload(file) {
            //     this.loading = true
            //     const isJPG = file.type === 'image/jpeg';
            //     const isLt2M = file.size / 1024 / 1024 < 2;
            //
            //     if (!isJPG) {
            //         this.loading = false
            //         this.$message.error('上传头像图片只能是 JPG 格式!');
            //     }
            //     if (!isLt2M) {
            //         this.loading = false
            //         this.$message.error('上传头像图片大小不能超过 2MB!');
            //     }
            //     return isJPG && isLt2M;
            // }
        }
    }
</script>

<style scoped>
    .PersonalSettings {
        width: 644px;
        margin: auto;
        background: #ffffff;
        padding: 10px 10px 20px 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 26%)
    }

    ::v-deep .el-tabs--border-card {
        background: #FFF;
        border: 0px solid #DCDFE6;
        box-shadow: 0 0px 0px 0 rgb(0 0 0 / 12%), 0 0 0px 0 rgb(0 0 0 / 4%);
    }

    ::v-deep .el-tabs--border-card > .el-tabs__header {
        background-color: #F5F7FA;
        border: 1px solid #E4E7ED;
        margin: 0;
    }

    ::v-deep .el-image {
        position: relative;
        display: block;
    }

    ::v-deep .el-form-item__content {
        display: block;
    }
</style>
